﻿<div id="pageBox">
    <div class="box">
        <div class="box-header">
            <h3 class="box-title">Admin List</h3>
            <div class="box-tools">
                <button type="button" data-toggle="modal" data-target="#modal-role" title="Add Roleure" class="btn btn-xs btn-info">
                    <i class="fa fa-plus"></i> Add Admin
                </button>
            </div>
        </div>
        <div class="box-body no-padding">
            <div class="dataTables_wrapper form-inline dt-bootstrap">
                <table id="mainTable" ref="mainTable" class="table table-striped" style="width:100%;">
                </table>
            </div>
        </div>
    </div>

    <!--分配角色Modal-->
    <div class="modal fade" id="modal-role">
        <input id="admin_id" value="0" type="hidden" />
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title">Edit Admin</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>Name</label>
                        <input id="admin_name" v-model="info.Name" onKeyUp="value=value.replace(/[^\w_]/g,'')" type="text" class="form-control" placeholder="Name used when logging in...">
                    </div>
                    <div class="form-group">
                        <label>Nickname</label>
                        <input id="nickname" v-model="info.Nickname" type="text" class="form-control" placeholder="Enter Nickname...">
                    </div>
                    <div class="form-group">
                        <label>Email</label>
                        <input id="email" v-model="info.Email" type="text" class="form-control" placeholder="">
                    </div>
                    <div class="form-group">
                        <label>Chose Role</label>
                        <select id="role-list" class="form-control select2" placeholder="Please chose roles" style="width: 100%;">
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" v-on:click="Save()">Save changes</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <!--重置密码Modal-->
    <div class="modal fade" id="modal-reset">
        <input id="reset_id" value="0" type="hidden" />
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title">Reset Admin Password</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>New Password</label>
                        <input id="passwrod" type="password" class="form-control" placeholder="new password...">
                    </div>
                    <div class="form-group">
                        <label>Confirm Password</label>
                        <input id="confirm" type="password" class="form-control" placeholder="confirm new password...">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" v-on:click="ResetPassword()">Save changes</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

</div>
@section styles
        {
    <link rel="stylesheet" href="~/Content/libs/select2/dist/css/select2.min.css" />
}
@section scripts{
    <script src="~/Content/libs/select2/dist/js/select2.full.min.js" type="text/javascript"></script>
    <script type="text/javascript">

    var MyVue = new Vue({
        el: "#pageBox",
        data: {
            admins: [],
            info:[] ,
            hasRoles:[],
            roleList:[]
        },
        mounted: function () {
            $this = this;
            $this.LoadData();
            $this.Modal();
            $this.GetAllRole();

        },
        methods: {
            ResetPassword: function ()
            {
                var adminId = $("#reset_id").val();
                var password1 = $("#passwrod").val();
                var password2 = $("#confirm").val();
                 if (password1==""||password2=="") {
                      admin.msg("Please Enter Password","Warning")
                    return;
                }
                if (password1!=password2) {
                    admin.msg("The two passwords are inconsistent!","Warning")
                    return;
                }
                admin.ajax({
                    url: '@Url.Action("ResetPassword")',
                    data: { password: password1, confirmPassword: password2,adminId:adminId },
                    loading: true,
                    success: function (r) {
                        if (r.status == 1) {
                            admin.msg("Success", "Success")
                            $('#modal-reset').modal('hide');
                        }
                        else {
                            admin.msg("Failed","Error");
                        }
                    }
                });

            },
            IntTable: function () {
                $this = this;
                $('#mainTable').DataTable({
                    searching: false,
                    info: false,
                    paging: false,
                    sort: false,
                    serverSide: false,
                    data: $this.admins,
                    lengthChange: false,
                    destroy: true,
                    columns: [
                        {
                            data: "Name",
                            title: "Name"
                        },
                        {
                            data: "Nickname",
                            title: "Nickname"
                        },
                        {
                            data: "Email",
                            title: "Email"
                        },
                        {
                            data: "Id",
                            title: "Operation",
                            render: function (data, type, full, meta) {

                                var html = '<div onclick="MyVue.BtnClick('+data+',0);" class="btn-table-op"><button data-toggle="modal" data-target="#modal-role" type="button" class="btn btn-info btn-xs">Edit</button>' +
                                    '<button data-toggle="modal" data-target="#modal-reset" type="button" class="btn btn-warning btn-xs" onclick="MyVue.BtnClick('+data+',1);">Password</button>' +
                                    '<button type="button" class="btn btn-danger btn-xs" onclick="MyVue.Delete('+data+')">Delete</button></div>';
                                return html;

                            }
                        }
                    ]
                });
                $("#mainTable tr").eq(0).css({ "background-color":"rgb(60, 141, 188)","color":"#FFFFFF"});
            },
            LoadData: function () {
                $this = this;
                admin.ajax({
                    url: '@Url.Action("GetData")',
                    data: '',
                    loading: true,
                    success: function (r) {
                        if (r.status == 1) {
                            $this.admins = r.data;
                            $this.IntTable();
                        }
                    }
                });

            },
            BtnClick: function (adminId,type) {
                if (adminId > 0)
                {
                    $("#admin_id").val(adminId);
                }
                if (type>0) {
                    $("#reset_id").val(adminId);
                }

            },
            GetAllRole: function () {
                admin.ajax({
                            url: '@Url.Action("GetALLRoles")',
                            data: { },
                                loading: true,
                                success: function (r) {
                                    if (r.status == 1) {
                                        MyVue.roleList = r.data 
                                         $('#role-list').select2({
                                                multiple: true,
                                                placeholder: 'Please chose Roles',
                                                allowClear: true,
                                                data: MyVue.roleList
                                            });
                                    }
                                }
                    });

            },
            Delete: function (adminId) {
                   admin.confirm("Would you like to delete it?", function () {
                            admin.ajax({
                            url: '@Url.Action("Delete")',
                            data: {adminId:adminId },
                                loading: true,
                                success: function (r) {
                                    if (r.status == 1) {
                                        admin.msg("Success", "Success");
                                        MyVue.LoadData();
                                    }
                                    else {
                                        admin.msg("Failed", "Error");
                                    }
                                }
                    });
                        });
               

            },
            Modal: function () {

                $('#modal-role').on('show.bs.modal', function (e) {
                    var admin_id = $("#admin_id").val();
                    MyVue.CleanInputDatas();
                    if (admin_id > 0) {
                        $(".modal-title").text("Edit Admin");
                        admin.ajax({
                            url: '@Url.Action("GetAdminInfo")',
                            data: { adminId: admin_id },
                            loading: true,
                            success: function (r) {
                                if (r.status == 1) {
                                    $("#admin_name").attr("readonly", "readonly");
                                    MyVue.info = r.data.info;
                                    MyVue.hasRoles = r.data.roles;
                                    $('#role-list').val(MyVue.hasRoles.split(',')).trigger('change');
                                }
                            }
                        });
                    }
                    else {
                        $(".modal-title").text("Add Admin");
                        $("#admin_name").removeAttr("readonly");
                        MyVue.info["Id"] = 0;
                        MyVue.info["Name"] = "";
                        MyVue.info["Nickname"] = "";
                        MyVue.info["Email"] = "";

                    }
                });

                $('#modal-reset').on('show.bs.modal', function (e) {
                    $("#passwrod").val("");
                    $("#confirm").val("");
                });
            },
            CleanInputDatas: function ()
            {
                $('#modal-role input').val('');
                $("#admin_id").val(0);
                $("#role-list").val("").trigger('change'); 
            },
            Save: function ()
            {
                var roles =$("#role-list").val();
                var info = MyVue.info;

               admin.ajax({
                            url: '@Url.Action("Save")',
                            data: { info:info,roles:roles},
                            loading: true,
                            success: function (r) {
                                if (r.status == 1) {
                                    $('#modal-role').modal('hide');
                                    admin.msg("Success", "Success");
                                    MyVue.LoadData();
                                }
                                else {
                                    admin.msg(r.msg, "Error");
                                }
                            }
                        });

                

            }

        }

    });
    </script>
}